<template>
  <a-tabs :size="size">
    <a-tab-pane key="config" tab="配置">
      <a-form :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
        <a-row>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24">
            <a-form-item label="节点名称">
              <a-input placeholder="请输入节点名称" :size="size" :defaultValue="cell.value" @change="(e) => (cell.value = e.target.value)" />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24">
            <a-form-item label="结果变量">
              <a-input :size="size" :defaultValue="getCellValue(props, 'scriptVariable')" @change="(e) => setCellValue(props, 'scriptVariable', e)" />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24">
            <a-form-item label="超时时间">
              <a-input :size="size" :defaultValue="getCellValue(props, 'scriptTimeout')" @change="(e) => setCellValue(props, 'scriptTimeout', e)" />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24">
            <a-form-item label="脚本名">
              <a-input :size="size" :defaultValue="getCellValue(props, 'scriptName')" @change="(e) => setCellValue(props, 'scriptName', e)" />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24">
            <a-form-item label="脚本文件">
              <a-input :size="size" :defaultValue="getCellValue(props, 'scriptFile')" @change="(e) => setCellValue(props, 'scriptFile', e)" />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24">
            <a-form-item label="结果编码">
              <a-input :size="size" :defaultValue="getCellValue(props, 'scriptCharset')" @change="(e) => setCellValue(props, 'scriptCharset', e)" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="执行参数" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
              <a-input
                :size="size"
                :defaultValue="getCellValue(props, 'scriptParameter')"
                @change="(e) => setCellValue(props, 'scriptParameter', e)"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { setCellValue, getCellValue } from '../utils/tools';
  const props = defineProps({
    direction: { type: String, default: 'bottom' },
    cell: { type: Object },
    editor: { type: Object },
  });
  const size = ref('small');
  const formItemLayout = reactive({
    labelCol: { span: 5 },
    wrapperCol: { span: 17 },
    colSpan: 8,
  });
</script>
